<template>
  <el-button :icon="Fold" size="large" class="el-collapsed" @click="foldpush" />
  <!-- <el-menu
        background-color="#333744"
        text-color="#fff"
        active-text-color="#409EFF"
        unique-opened
        :collapse="isCollapse"
        :collapse-transition="false"
        router
        :default-active="activeurl"
      > -->
      <!-- active-text-color="#ffd04b" 
    background-color="rgb(95, 114, 253)" 
    class="el-menu-vertical-demo"
    default-active="dept" 
    :default-openeds="['group1']" 
    text-color="rgb(253, 253, 255)" 
    @open="handleOpen"
    @close="handleClose" 
    router 
    :collapse="isCollapsed"> -->
  <el-menu 
  active-text-color="#E1913C" 
  background-color="#333744" 
  class="el-menu-vertical-demo"
  default-active="dept" 
  :default-openeds="['group1']" 
  text-color="rgb(253, 253, 255)" 
  @open="handleOpen"
  @close="handleClose" 
  router 
  :collapse="isCollapsed">
    <el-sub-menu index="group1">
      <template #title>
        <el-icon>
          <Setting />
        </el-icon>
        <span>挂号收费</span>
      </template>
      <!-- index中的字符是跳转的路径 -->
      <el-menu-item index="winRegist" >窗口挂号</el-menu-item>
      <el-menu-item index="winUnRegist">挂号服务</el-menu-item>
      <!-- <el-menu-item index="payMoney">收费</el-menu-item>-->
      <el-menu-item index="backMoney">退费服务</el-menu-item> 
      <el-menu-item index="searchPayment">费用记录查询</el-menu-item>

    </el-sub-menu>

  </el-menu>
</template>
  
<script  setup>
import {
  Fold,
  Setting,
} from '@element-plus/icons-vue'
import { ref } from "vue"


const isCollapsed = ref(false);

const emits = defineEmits(['foldchange'])
const foldpush = () => {
  isCollapsed.value = !isCollapsed.value;
  console.log("子组件提交了");
  emits('foldchange', isCollapsed.value);
}
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
</script>
  
<style lang="scss" scoped>
.el-button {
  width: 100%;
}

.el-menu {
  border-right: 0px solid;
}
.el-collapsed{
  background-color: rgb(113, 170, 219) ;
  border: 0;
}
</style>